import { Empty, NavBar, Image as MyImage } from "antd-mobile";
import moment from "moment";
import React, { useEffect } from "react";
import $fetch from "../../../utils/app/$fetch";
import $reducer from "../../../utils/app/$reducer";

const CoreRecord = () => {
  const initState = {
    record: [],
    hasLoaded: false,
  };
  const [state, dispatch] = $reducer({ ...initState });

  useEffect(() => {
    initPage();
  }, []);

  useEffect(() => {
    if (state?.record?.length > 0) {
      state?.record.forEach((item: any) => {
        const img: any = new Image();
        img.src = item?.goodsPhoto;
      });
    }
  }, [state?.record]);

  const initPage = async () => {
    const res: any = await $fetch(
      "/customerPoint/customerPointRecord",
      {},
      { noGroupId: "no" }
    );
    dispatch({ record: res, hasLoaded: true });
  };

  const back = () => {
    window.history.go(-1);
  };

  const renderView = () => {
    if (!state?.hasLoaded) {
      return null;
    }
    if (!state?.record?.length) return <Empty description="暂无数据" />;

    return (
      <ul className="that_public_list">
        {state?.record?.map((list: any) => {
          return (
            <li key={list?.orderSn}>
              <div className="item_top">
                <div>订单号：{list?.orderSn}</div>
              </div>

              <div className="item_bottom">
                <MyImage
                  src={list?.goodsPhoto}
                  fit="cover"
                  lazy={true}
                  width="2.11rem"
                  height="2.11rem"
                />
                {/* <div className="left_wraper">
                  <img src={list?.goodsPhoto} alt="" />
                </div> */}
                <div className="right_wraper">
                  <div className="header">
                    <div>{list?.goodsName}</div>
                    <div>×{list?.quantity}</div>
                  </div>
                  <div className="time">
                    下单时间：
                    {moment(list?.orderTime).format("YYYY-MM-DD HH:mm:ss")}
                  </div>
                </div>
              </div>
              <div className="price">
                积分：<span>- {list?.point}</span>
              </div>
            </li>
          );
        })}
      </ul>
    );
  };

  return (
    <div className="container_core_record">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={back}
      >
        兑换记录
      </NavBar>
      {renderView()}
    </div>
  );
};

export default CoreRecord;
